<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>Arabic</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/libs/hotcss.js"></script>
</head>
<body>
    <div class="wrap">
        <header id="nav">
            <div id="fixtop" class="cart-header">
                <div class="back fr">
                    <a href="javascript:window.history.go(-1)" class="btn btn-right">
                        <i class="iconfont">&#xe61a;</i>
                    </a>
                </div>
                <div class="back fl">
                    <a href="javascript:;" class="btn btn-left cart-edit">
                        <i class="iconfont">&#xe601;</i>
                    </a>
                </div>
                <div class="center">购物车</div>
                <div class="clearfix"></div>
            </div>
        </header>
        <section class="shopping-cart-wrap">
            <div class="shopping-cart-item">
                <div class="item-panel item-panel-img">
                    <img src="images/clothe.jpg" alt="clothe">
                </div>
                <div class="item-panel item-panel-info">
                    <div class="item-panel-info-list">
                        <ul>
                            <li class="title">女士大码A巴拉巴拉巴巴</li>
                            <li>颜色: 红色</li>
                            <li>尺寸: XL / 标准尺码: XXXL</li>
                            <li>数量: 1</li>
                            <li>$37.99 <del>46.99</del> <span class="col_ff0b0b"> 19%折扣</span></li>
                        </ul>
                    </div>
                    <div class="item-operate">
                        <a href="javascript:;" class="item-edit fr">
                            <i class="iconfont">&#xe601;</i>
                        </a>
                        <a href="javascript:;" class="item-delete fl">
                            <i class="iconfont">&#xe654;</i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="shopping-cart-item" data-json=>
                <div class="item-panel item-panel-img">
                    <img src="images/clothe.jpg" alt="clothe">
                </div>
                <div class="item-panel item-panel-info">
                    <div class="item-panel-info-list">
                        <ul>
                            <li class="title">女士大码A巴拉巴拉巴巴</li>
                            <li>颜色: 红色</li>
                            <li>尺寸: XL / 标准尺码: XXXL</li>
                            <li>数量: 1</li>
                            <li>$37.99 <del>46.99</del> <span class="col_ff0b0b"> 19%折扣</span></li>
                        </ul>
                    </div>
                    <div class="item-operate">
                        <a href="javascript:;" class="item-edit fr">
                            <i class="iconfont">&#xe601;</i>
                        </a>
                        <a href="javascript:;" class="item-delete fl">
                            <i class="iconfont">&#xe654;</i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="pay-info">
                <div class="amount">
                    <span class="fr">商品总计:</span>
                    <span class="fl">$75.98</span>
                </div>
                <div class="fare">
                    <span class="fr">运费:</span>
                    <span class="fl">$0.00</span>
                </div>
            </div>
        </section>

        <footer class="footer pd28 back_w">
            <div class="total"> 2 件商品 合计: $75.98</div>
            <a href="javascript:;" class="f-btn">结账</a>
        </footer>
        <div class="select-box back_w">
            <!--商品缩略图等信息-->
            <div class="goods-box ">
                <a href="javascript:;" class="close col_4a4a4a">
                    <i class="iconfont">&#xe608;</i>
                </a>
                <div class="goods-pic">
                    <img src="images/clothe.jpg" class="thumb" alt="thumb">
                </div>
                <div class="goods-info">
                    <ul>
                        <li class="col_ff0b0b">$37.99 19% 折扣</li>
                        <li><del>46.99</del></li>
                        <li class="tip ">请选择颜色尺寸</li>
                    </ul>
                </div>
            </div>
            <!--款式 S-->
            <div class="style-box ">
                <h1>颜色</h1>
                <ul>
                    <!--data-src 选择修改上面的图片-->
                    <li class="color"  data-src="">红</li>
                    <li class="color">黄</li>
                    <li class="color">蓝</li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--款式 E-->
            <!--尺寸 S-->
            <div class="style-box ">
                <h1>尺寸 <a href="javascript:;" class="size-help fl"><i class="iconfont">&#xe65e;</i> 尺寸指南</a></h1>
                <ul>
                    <!--选中修改 goods-info中的tip-->
                    <li class="size" data-size="XL">XL</li>
                    <li class="size">L</li>
                    <li class="size">M</li>
                    <li class="size">S</li>
                    <li class="size">XS</li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--尺寸 E-->
            <!--数量 S-->
            <div class="count-box">
                <h1>数量</h1>
                <div class="operate clearfix">
                    <a href="javascript:;" class="fr reduce"> <i class="iconfont">&#xe67f;</i> </a>
                    <input class="fr item-count" type="text" value="1" disabled />
                    <a href="javascript:;" class="fr add"> <i class="iconfont">&#xe600;</i></a>
                </div>
            </div>
            <!--数量 E-->
            <a href="javascript:;" id="submit-order">提交</a>
        </div>
        <div class="shadow"></div>
    </div>
    <!--含 hammer.js-->
    <script src="js/libs/jquery-1.11.1.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function () {
            $(".cart-edit").click(function () {
                $(".item-operate").toggleClass('visible');
            });
            $(".item-operate .item-edit").click(function () {
                Arabic.toggleSelectBox(true);
            })
        })
    </script>
</body>
</html>